<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template/template_1.xhtml">
    <ui:define name="content">
                <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
            <title>Player MP3</title> 
            <link rel="stylesheet" href="resources/css/style.css"/>
        </head> 
        <body>       


            <div class="player">
                <img src="" alt="" class="thumb"/>
                <div class="title"></div>
                <a href="#" class="play"></a>
                <a href="#" class="pause"></a>
                <a href="#" class="prev"></a>
                <a href="#" class="next"></a>
                <div class="duration">Durée : <span></span></div>
                <div class="time"></div>
                <div class="progress">
                    <span></span>
                </div>
                <div class="volume-container">
                    <div class="volume"></div>
                </div>
                <div class="playlist">
                    <!-- la balise ui:repeat permet de faire la boucle pour charger la playlist -->
                    
                    <ui:repeat value="#{mp3LibraryMBean.sl}" var="list" >
                        <a href="#{list.emplacement}"><img src="resources/img/noCover.png"/> #{list.titre}</a>
                    </ui:repeat>

                    <!-- <a href="http://noctanvol.free.fr/musique/derezzed.mp3"><img src="resources/img/noCover.png"/>daft punk derezzed</a> -->

                </div>
            </div>
        </body> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript" src="resources/js/main.js"></script>
    </ui:define>

</ui:composition>
